<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //从html5角度来看
        //1.元素(Element)
        //2.属性(Attribute)
        //3.注释(Comment)
        //4.值(Text)
        //从对象角度来看:
        //1.节点(Node) 
    </script>
    <div id="outer">
        <div id="inner"><a href="" id="a01">测试</a></div>
    </div>
    <script>
        var divObj=document.getElementById("outer");
        console.log(divObj.nodeType);
        /**
         * nodeType:（节点类型5个）
         * 1.Element_Node;  1
         * 2.Attribute_Node;  2
         * 3.Text_Node;  3
         * 4.Comment_Node;  8
         * 5.Document_Node;  9
         **/
        var textNode=document.createTextNode("计算机2221");
        console.log(textNode.nodeType,textNode.nodeName);
        divObj.appendChild(textNode);
        var attrNode=document.createAttribute("name");
        console.log(attrNode.nodeType);
        var commNode=document.createComment("hello world");
        console.log(commNode.nodeType);
        console.log(document.nodeType);
        //作业:SGML XML HTML三者之间的关系是什么？
    </script>
</body>
</html>